<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>品客来农庄</title>
	</head>
	<style>
		/* body { height: 100%; background: #fff url(static/img/backgroud.png) 50% 50% no-repeat; background-size: cover;}	 */
		.user{
			width:350px;
			margin: 0 auto;
			text-align:center;
			margin-top: 50px;
			margin-bottom: 50px;
			
		}
		.user input{
			height: 15px;
		}
		.insert td{
			height: 40px;
		}
		.header th{
			height: 30px;
		}
		.tab {
			border: 1px solid #CCCCCC
		}
		.tab thead,
		.tab tbody tr {
			display: table;
			width: calc(100% - 2px);
			table-layout: fixed;
		}
		.tab tbody {
			display: block;
			overflow-y: scroll;
			height: 150px;
		}
		.tab th,
		.tab td {
			padding: 9px 0px;
			text-align: center;
		}
</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<body>
		<h1 align="center">注意事项</h1>
		<h2 align="center">本次点餐为明天的用餐，超过晚上十一点后不能点餐，数据不会上传。</h2>
		<h3 align="center" id="Clock"></h3>
		<div class="user">
			<div style="display: flex;justify-content: space-between; margin: 10px 0; height: 30px;">
				<div>姓名：</div>
				<div ><input type="text" name="name" placeholder="姓名"></div>
			</div>
			<div style="display: flex;justify-content: space-between;margin: 10px 0; height: 30px;">
				<div >年级：</div>
				<div >
					<select name="select_nian_ji" style="width:164px; height: 20px; height: 30px;">
						<option value="qi">七年级</option>
						<option value="ba">八年级</option>
						<option value="jiu">九年级</option>
						<option value="shi">高一</option>
						<option value="shi_yi">高二</option>
						<option value="shi_er">高三</option>
					</select>
				</div>
			</div>
			<div style="display: flex;justify-content: space-between;margin: 10px 0; height: 30px;">
				<div>早餐点餐份数：</div>
				<div><input type="number" name="zao_numbers" placeholder="份数"></div>
			</div>
			<div style="display: flex;justify-content: space-between;margin: 10px 0; height: 30px;">
				<div>午餐餐点餐份数：</div>
				<div><input type="number" name="zao_numbers" placeholder="份数"></div>
			</div>
			<div style="display: flex;justify-content: space-between;margin: 10px 0; height: 30px;">
				<div>晚餐餐点餐份数：</div>
				<div><input type="number" name="zao_numbers" placeholder="份数"></div>
			</div>
			<div style="margin-top: 10px;"><button type="button" style="border-radius: 10px; display: block; width: 100px; margin: 0 auto;">提交</button></div>
		</div>

		<table border="2" style="width:100%; text-align:center; border-collapse: collapse;" class="tab">
			<thead>
				<tr class="header" >
					<th>序号</th>
					<th>姓名</th>
					<th>年级</th>
					<th>早餐（份）</th>
					<th>午餐（份）</th>
					<th>晚餐（份）</th>
					<th>用餐时间</th>
					<th>用餐时间（星期）</th>
					<th>点餐时间</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</body>
	<script language="javascript">
		function tick() {
			var today = new Date();
			var month = today.getMonth() + 1; <!--getMonth显示当前月份-1，所以要+1才能显示当前月份-->
			var year, date, hours, minutes, seconds;
			var intHours, intMinutes, intSeconds;
			var week = new Array() <!--显示几天为星期几-->
			week[0] = "星期天 ";
			week[1] = "星期一 ";
			week[2] = "星期二 ";
			week[3] = "星期三 ";
			week[4] = "星期四 ";
			week[5] = "星期五 ";
			week[6] = "星期六 ";
			intHours = today.getHours();
			intMinutes = today.getMinutes();
			intSeconds = today.getSeconds();
			year = today.getFullYear();
			date = today.getDate();
			var time;
			if (intHours == 0) {
				hours = "00:";
			} else if (intHours < 10) {
				hours = "0" + intHours + ":";
			} else {
				hours = intHours + ":";
			}
			if (intMinutes < 10) {
				minutes = "0" + intMinutes + ":";
			} else {
				minutes = intMinutes + ":";
			}
			if (intSeconds < 10) {
				seconds = "0" + intSeconds + " ";
			} else {
				seconds = intSeconds + " ";
			}
			//根据不同的时间显示不同的问候。
			//下面采用自己总结的测试纠正法对time进行赋值
			time = "午夜好";
			if (today.getHours() <= 22) time = "晚上好";
			if (today.getHours() <= 19) time = "傍晚好";
			if (today.getHours() <= 17) time = "下午好";
			if (today.getHours() <= 14) time = "中午好";
			if (today.getHours() <= 12) time = "上午好";
			if (today.getHours() <= 8) time = "早上好";
			if (today.getHours() <= 5) time = "凌晨好";
			timeString = "今天是：" + year + "年" + month + "月" + date + "日  " + hours + minutes + seconds + week[today.getDay()] +
				time;
			Clock.innerHTML = timeString;
			window.setTimeout("tick();", 1000);
		}
		window.onload = tick;
		var arr = null;
		var tab = document.querySelector(".tab tbody");
		$.ajax({
			type: 'post',
			url: 'http://www.cxkboke.top/data_api',
			// dataType: 'json',
			// data: {
			// },

			error: function(XmlHttpRequest, textStatus, errorThrown) {
				alert("操作失败!");
			},
			success: function(result) {
				console.log(result) //console变量在ie低版本下不能用
				// alert(result.showapi_res_code)
				arr = JSON.parse(result);
				console.log(arr.data);
				for (var i = arr.data.length - 1; i >= 0; i--) {
					var td1 = document.createElement("td"); //序号
					var td2 = document.createElement("td"); //姓名							
					var td3 = document.createElement("td"); //年级
					var td4 = document.createElement("td"); //早餐（份）
					var td5 = document.createElement("td"); //午餐（份）
					var td6 = document.createElement("td"); //晚餐（份）
					var td7 = document.createElement("td"); //用餐时间
					var td8 = document.createElement("td"); //用餐时间（星期）
					var td9 = document.createElement("td"); //点餐时间
					td1.innerHTML = arr.data[i].id;
					td2.innerHTML = arr.data[i].name;
					td3.innerHTML = arr.data[i].nian_ji;
					td4.innerHTML = arr.data[i].zao_number;
					td5.innerHTML = arr.data[i].wu_number;
					td6.innerHTML = arr.data[i].wan_number;
					td7.innerHTML = arr.data[i].eat_day;
					td8.innerHTML = arr.data[i].eat_week;
					td9.innerHTML = arr.data[i].dian_can_time;
					var tr = document.createElement("tr");
					tr.className = "insert";
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(td6);
					tr.appendChild(td7);
					tr.appendChild(td8);
					tr.appendChild(td9);
					tab.appendChild(tr);
				}
			}
		});
	</script>
</html>
